<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_photo_1')">
            <template #right>
                <a class="add-btn" :class="{'add-ok' : photo.wcaName.length > 0 && photo.wcaImage.length > 0}" @click="saveOrUpdate">
                    {{ $t('sure') }}
                </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div class="add-body">
                <div class="add-item">
                    <div>{{ $t('circle_photo_5') }}</div>
                    <div class="add-title">
                        <textarea v-model="photo.wcaName" :placeholder="$t('circle_photo_6')" maxlength="20" οnchange="this.value=this.value.substring(0, 10)" οnkeydοwn="this.value=this.value.substring(0, 10)" οnkeyup="this.value=this.value.substring(0, 200)"></textarea>
                    </div>
                </div>
                <div class="add-item">
                    <div>{{ $t('circle_photo_7') }}</div>
                    <div class="add-img">
                        <div>{{ $t('circle_photo_8') }}</div>
                        <div><van-uploader v-model="fileList" :max-count="1" :after-read="upload"/></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Uploader, Toast } from 'vant';
export default {
    name: 'AddPhoto',
    components: {
        vanUploader: Uploader,
        vanToast: Toast
    },
    data() {
        return {
            fileList: [],
            photo: {
                wcaImage: '',
                wcaName: '',
                wcaWcId: 1
            }
        };
    },
    methods: {
        upload(file) {
            file.status = 'uploading';
            let formData = new FormData();
            formData.append('file', file.file);
            this.$axios.post('/app/api/file', formData).then(res => {
                this.photo.wcaImage = res.data.url;
                file.status = 'done';
            });
        },
        saveOrUpdate() {
            if (this.photo.wcaName.length > 0) {
                if (this.fileList.length === 0) {
                    Toast({message: this.$t('please_upload_album_cover'), forbidClick: true});
                } else {
                    if (this.photo.wcaId) {
                        this.$axios.put('/app/api/trainee/work-circle/atlas', this.photo).then(res => {
                            Toast({message: this.$t('circle_photo_9'), forbidClick: true});
                            this.$router.go(-1);
                        });
                    } else {
                        this.$axios.post('/app/api/trainee/work-circle/atlas', this.photo).then(res => {
                            Toast({message: this.$t('circle_photo_10'), forbidClick: true});
                            this.$router.go(-1);
                        });
                    }
                }
            } else {
                Toast({message: this.$t('circle_photo_6'), forbidClick: true});
            }
        }
    },
    created() {
        let data = this.$route.query;
        if (data.wcaId) {
            this.photo.wcaImage = data.wcaImage;
            this.photo.wcaName = data.wcaName;
            this.photo.wcaWcId = data.wcaWcId;
            this.photo.wcaId = data.wcaId;
            this.fileList.push({url: data.wcaImage});
        } else {
            this.photo.wcaWcId = data.wcaWcId;
        }
    }
};
</script>

<style scoped lang="less">
    .add-ok {
        color: #1a1a1a !important;
    }
    .add-body {
        margin-top: 15px;
        .add-item {
            margin-bottom: 15px;
            &>div:first-child {
                margin-bottom: 5px;
                padding: 0 15px;
            }
            .add-title {
                height: 80px;
                padding: 20px 15px;
                background: #fff;
                textarea {
                    width: 100%;
                    height: 100%;
                    font-size: 16px;
                    outline:none;
                    resize:none;
                    border: none;
                }
            }
            .add-img {
                height: 80px;
                padding: 20px 15px;
                background: #fff;
                display: flex;
                align-content: center;
                justify-content: space-between;
                &>div:first-child {
                    line-height: 80px;
                }
            }
        }
    }
    .overwrite-title {
        display: flex;
        align-content: center;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        color: #333;
    }
    .add-btn {
        height: 55px;
        line-height: 55px;
        padding: 0 15px;
        font-size: 16px;
        color: #ccc;
    }
</style>
